{% extends "jarvis/base.html" %}

{% block content %}
<script>
  function removeArea(area_name)
  {
  $.ajax({
        url: '/jarvis/areas/'+area_name+'/remove'
    });
  }
</script>

{% if area_list %}
<ul data-role="listview">
  {% for area in area_list %}
  
  <li area="{{area.0.area_name}}">
    <a href="/jarvis/areas/{{area.0.area_name}}">{{area.0.area_name}}</a><span class="ui-li-count">{{area.1}}</span>
    </a>
    <a class="remove" data-mini="true" data-icon="delete" onclick=""></a>

</li>

{% empty %}
  <li>No areas have been established yet</li>
{% endfor %}
</ul>
{% endif %}
<script>
$("a.remove").bind("click", function(event, ui){
    parent = $(this).parents("li");
    area = parent.attr("area");
    removeArea(area);
    parent.remove();
});
</script>
{% endblock%}
